<template>
  <div class="my">
    <section>
      <!-- 个人信息 -->
      <!-- 头像 -->
       <div class="user-img">
          <div class="show-img">
              <van-image
                round
                width="150px"
                height="150px"
                :src="src"
              />
          </div>
          <div class="upload-img">
            <van-uploader :after-read="afterRead" />
          </div>
       </div>
      
      <!-- 账号 -->
      <div class="user-name">
          账号: <span> {{ username }}</span>
       </div>
      <!-- 其他 -->
      <div class="other-box">
          <router-link to="/address"><van-icon name="location-o" /> <span>我的地址</span><van-icon name="arrow" /></router-link>
          <router-link to="/"><van-icon name="like-o" /> <span>我的收藏</span><van-icon name="arrow" /></router-link>
          <router-link to="/"><van-icon name="coupon-o" /> <span>代金券</span><van-icon name="arrow" /></router-link>
          <router-link to="/"><van-icon name="phone-circle-o" /><span>关于我们</span><van-icon name="arrow" /></router-link>
      </div>

    </section>
    <footer>
        <van-button type="primary" @click="logout">退出登录</van-button>
    </footer>
  </div>
</template>

<style lang="less" scoped>
  .my {
      padding-bottom: 80px;
      section {
        padding: 0 0 15px;
        .user-img {
          width: 150px;
          height: 150px;
          margin: 20px auto;
          position: relative;
          border-radius: 50%;
          // 修改上传文件控件的外观
          .van-uploader__upload {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            opacity: 0;
          }
          .show-img, .upload-img {
            position: absolute;
            top: 0;
            left: 0;
          }
          .upload-img {
            opacity: 0;
            z-index: 10
          }
        }
        .user-name {
          text-align: center;
          padding: 10px 15px;
          font-size: 18px;
        }
        .other-box {
           a {
              display: block;
              height: 50px;
              line-height: 50px;
              padding: 0  15px;
              margin-top: 10px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 16px;
              i {
                font-size: 24px;
                margin-right: 5px;
                vertical-align: middle;
              }
              span {
                vertical-align: middle;
              }
              .van-icon:last-child {
                height: 50px;
                position: absolute;
                right: 15px;
                line-height: 50px;
                
              }
           }
        }
      }
      footer {
         width: 100%;
         text-align: center;
      }
  }
</style>

<script>
import { Dialog } from 'vant';

// 定义数组存储所有用户头像
let userimgs =  {};
let imgstr = localStorage.getItem("SKY_USERIMG");
if(imgstr) {
  userimgs = JSON.parse(imgstr);
}

export default {
  // 设置数据
  data(){
    return {
       username: '账号',
       src: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    }
  },
  // 初始化钩子函数
  created(){
    // 获取用户名
     this.username = localStorage.getItem("SKY_USERNAME");
    //  获取用户身份
     let token = localStorage.getItem("AUTO_TOKEN");
    //  判断是否登录
     if(token) {
      // 判断是否有存在用户头像
        if(userimgs[token] && userimgs[token].src) {
          // 有，那就赋值 （刷新这个头像就持久存储在本地的）
          this.src = userimgs[token].src;
        }
     }
  },
  // 访问这个组件之前的钩子函数
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 获取token
    let token = localStorage.getItem("AUTO_TOKEN");
    // 判断是有值
    if (token) {
      next(true);
    }
    else {
      Dialog.confirm({
        confirmButtonColor: "#0c8bf3",
        title: '您还没登录',
        message: '要跳转到登录页面吗?',
      })
      .then(() => {
        // on confirm （确定）
        next({ path: '/login' })
      })
      .catch(() => {
        // on cancel （取消）
        next(false);
      });
    }
  },

  // 编写方法
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file);
      if(file) {
        // 把base64格式的图片字符串赋值给src变量
        this.src = file.content;
        // 获取用户身份
        let token = localStorage.getItem("AUTO_TOKEN");
        if(token) {
          // 该用户头像是否存在
          if(userimgs[token]){
             // 是 (有缓存头像)
             userimgs[token].src = file.content;
          }
          else {
            // 否
            // 对象
            userimgs[token] = {};
            userimgs[token].src = file.content;
          }
          localStorage.setItem("SKY_USERIMG", JSON.stringify(userimgs));
        }
      }
    
    },
    // 退出登录
    logout(){
         // 先给用户做弹窗反馈
         Dialog.confirm({
            confirmButtonColor: "#0c8bf3",
            message: '您要退出登录吗',
            title: "提示",
         })
         .then(() => {
            // on close
            localStorage.removeItem("AUTO_TOKEN");
            setTimeout(()=> {
              // 跳转登录页
              this.$router.push({ path: '/login' })
            },150)
        })
        .catch(
           err=> {
            console.log(err);
           }
        )
    }
  }
}
</script>